<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 商户表单
                </el-breadcrumb-item>
                <el-breadcrumb-item>开户注册</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
                <el-radio-button label="top">↑</el-radio-button>
                <el-radio-button label="right">→</el-radio-button>
                <el-radio-button label="bottom">↓</el-radio-button>
                <el-radio-button label="left">←</el-radio-button>
            </el-radio-group>
            <div class="form-box">
                <el-form ref="customerFormRef" :rules="rules" :model="customerForm">
                <el-tabs :tab-position="tabPosition" style="width:100%;" v-model="activeTabName" @tab-click="func_tab_handleClick" >
                    <el-tab-pane label="商户企业基础信息" name="first" style="height:700px;overflow-y:auto;overflow-x:hidden">
                        <el-card class="box-card">
                            <template #header><div class="card-header"><span>商户企业基础信息</span>
                                <el-button class="button" @click="func_next_handle_click(2)" type="text">下一步</el-button></div>
                            </template>
                            <el-form-item label="公司名称" prop="corporateName" :label-width="formLabelWidth">
                                <el-input v-model="customerForm.corporateName" maxlength="50" show-word-limit/></el-form-item>
                            <el-form-item label="简称" prop="nickName" :label-width="formLabelWidth">
                                <el-input v-model="customerForm.nickName" maxlength="50" show-word-limit/></el-form-item>
                            <el-form-item label="注册地址省市区" prop="registeredAddressCode" :label-width="formLabelWidth">
                                <el-select v-model="regPostCodePopForm.provPops" placeholder="Select" style="width:100px;"
                                :loading="searchPostCodeLoading" @focus="func_getPostCodeOptsLoad(1,1)" @blur="func_setPostCode(1)" clearable>
                                    <el-option v-for="item in regPostCodePopForm.provOpts" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                                <el-select v-model="regPostCodePopForm.cityPops" placeholder="Select" style="width:100px;margin-left:10px"
                                :loading="searchPostCodeLoading" @focus="func_getPostCodeOptsLoad(1,2)" @blur="func_setPostCode(1)" clearable>
                                    <el-option v-for="item in regPostCodePopForm.cityOpts" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                                <el-select v-model="regPostCodePopForm.areaPops" placeholder="Select" style="margin-left:10px"
                                :loading="searchPostCodeLoading" @focus="func_getPostCodeOptsLoad(1,3)" @blur="func_setPostCode(1)" clearable>
                                    <el-option v-for="item in regPostCodePopForm.areaOpts" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                                <el-input v-model="customerForm.registeredAddressCode" v-if="false" />
                            </el-form-item>
                            <el-form-item label="注册地址" prop="registeredAddress" :label-width="formLabelWidth">
                                <el-input v-model="customerForm.registeredAddress" maxlength="200" show-word-limit/></el-form-item>
                            <el-form-item label="企业邮箱" prop="mail" :label-width="formLabelWidth">
                                <el-input v-model="customerForm.mail" maxlength="100" show-word-limit/></el-form-item>
                            <el-form-item label="公司电话" prop="companyPhone" :label-width="formLabelWidth">
                                <el-input v-model="customerForm.companyPhone" maxlength="13" show-word-limit/></el-form-item>
                            <el-form-item label="邮政编码" prop="postalCode" :label-width="formLabelWidth">
                                <el-input v-model="customerForm.postalCode" maxlength="8" show-word-limit /></el-form-item>
                            <el-form-item label="成立日期" prop="establishmentDate" :label-width="formLabelWidth">
                                <el-date-picker v-model="customerForm.establishmentDate" type="date" placeholder="请选择日期" />
                                <el-input v-model="customerForm.establishmentDate" v-if="false"/></el-form-item>
                            <el-form-item label="营业期限" prop="businessTermDate" :label-width="formLabelWidth" >
                                <el-input-number v-model="customerForm.businessTermDate" :min="1" :max="100" /></el-form-item>
                        </el-card>
                    </el-tab-pane>
                    <el-tab-pane label="商户企业属性信息" name="second" style="height:700px;overflow-y:auto;overflow-x:hidden">
                        <el-card class="box-card">
                            <template #header><div class="card-header"><span>商户企业属性信息</span>
                                <div style="float:right">
                                <el-button class="button" @click="func_next_handle_click(1)" type="text">上一步</el-button>
                                <el-button class="button" @click="func_next_handle_click(3)" type="text">下一步</el-button>
                                </div></div>
                            </template>
                            <el-form-item label="企业类型" prop="typeEnterprise" :label-width="formLabelWidth">
                                <el-row>
                                    <el-col :span="21">
                                        <el-select v-model="customerForm.typeEnterprise" filterable remote placeholder="请选择企业类型"
                                         :loading="searchTopicLoading"
                                         @focus="func_getOptionsLoad(2001)" :remote-method="(val)=>func_getOptionsLoad(2001)" clearable>
                                            <el-option v-for="item in groupPopForm.groupPopOptions1" :key="item.value" :label="item.label" :value="item.value" />
                                        </el-select>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                            <el-form-item label="企业性质" prop="natureEnterprise" :label-width="formLabelWidth">
                                <el-row>
                                    <el-col :span="21">
                                        <el-select v-model="customerForm.natureEnterprise" filterable remote placeholder="请选择企业性质"
                                        @focus="func_getOptionsLoad(2000)" :remote-method="(val)=>func_getOptionsLoad(2000)" clearable>
                                            <el-option v-for="item in groupPopForm.groupPopOptions2" :key="item.value" :label="item.label" :value="item.value" />
                                        </el-select>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                            <el-form-item label="企业规模类型" prop="enterpriseScaleType" :label-width="formLabelWidth">
                                <el-row>
                                    <el-col :span="21">
                                        <el-select v-model="customerForm.enterpriseScaleType" filterable remote placeholder="请选择企业规模"
                                        @focus="func_getOptionsLoad(5105)" :remote-method="(val)=>func_getOptionsLoad(5105)" clearable>
                                            <el-option v-for="item in groupPopForm.groupPopOptions3" :key="item.value" :label="item.label" :value="item.value" />
                                        </el-select>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                            <el-form-item label="所属行业" prop="industry" :label-width="formLabelWidth">
                                <el-row>
                                    <el-col :span="21">
                                        <el-select v-model="customerForm.industry" filterable remote  placeholder="请选择所属行业"
                                        :click="func_getOptionsLoad(5101)" :remote-method="(val)=>func_getOptionsLoad(5101)" clearable>
                                            <el-option v-for="item in groupPopForm.groupPopOptions4" :key="item.value" :label="item.label" :value="item.value" />
                                        </el-select>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                            <el-form-item label="特殊资质" prop="specialQualifications" :label-width="formLabelWidth">
                                <el-input v-model="customerForm.specialQualifications"/>
                            </el-form-item>
                            <el-form-item label="企业经营地址省市区" prop="businessAddressCode" :label-width="formLabelWidth">
                                <el-select v-model="busPostCodePopForm.provPops" placeholder="Select" style="width:100px;"
                                :loading="searchPostCodeLoading" @focus="func_getPostCodeOptsLoad(2,1)" @blur="func_setPostCode(2)" clearable>
                                    <el-option v-for="item in busPostCodePopForm.provOpts" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                                <el-select v-model="busPostCodePopForm.cityPops" placeholder="Select" style="width:100px;margin-left:10px"
                                :loading="searchPostCodeLoading" @focus="func_getPostCodeOptsLoad(2,2)" @blur="func_setPostCode(2)" clearable>
                                    <el-option v-for="item in busPostCodePopForm.cityOpts" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                                <el-select v-model="busPostCodePopForm.areaPops" placeholder="Select" style="margin-left:10px"
                                :loading="searchPostCodeLoading" @focus="func_getPostCodeOptsLoad(2,3)" @blur="func_setPostCode(2)" clearable>
                                    <el-option v-for="item in busPostCodePopForm.areaOpts" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                                <el-input v-model="customerForm.businessAddressCode" v-if="false" />
                            </el-form-item>

                            <el-form-item label="企业经营地址" prop="businessAddress" :label-width="formLabelWidth">
                                <el-input v-model="customerForm.businessAddress"/>
                            </el-form-item>
                            <el-form-item label="经营范围" prop="businessScope" :label-width="formLabelWidth">
                                <el-input type="textarea" rows="5" v-model="customerForm.businessScope" maxlength="400" show-word-limit></el-input>
                            </el-form-item>
                        </el-card>
                    </el-tab-pane>
                    <el-tab-pane label="商户企业证照信息" name="third" style="height:700px;overflow-y:auto;overflow-x:hidden">
                        <el-card class="box-card">
                            <template #header><div class="card-header"><span>商户企业证照信息</span>
                                <div style="float:right">
                                <el-button class="button" @click="func_next_handle_click(2)" type="text">上一步</el-button>
                                <el-button class="button" @click="func_next_handle_click(4)" type="text">下一步</el-button>
                                </div></div>
                            </template>
                            <el-form-item label="企业法人" prop="legalRepresentative" :label-width="formLabelWidth">
                                <el-input v-model="customerForm.legalRepresentative" maxlength="20" /></el-form-item>
                            <el-form-item label="社会统一信用代码" prop="invoiceTaxpayer" :label-width="formLabelWidth">
                                <el-input v-model="customerForm.invoiceTaxpayer" maxlength="18" show-word-limit /></el-form-item>
                            <el-form-item label="纳税人识别号" prop="invoiceTaxpayer" :label-width="formLabelWidth">
                                <el-input v-model="customerForm.invoiceTaxpayer" maxlength="18" readonly show-word-limit/></el-form-item>
                            <el-form-item label="组织机构代码" prop="organizationCode" :label-width="formLabelWidth">
                                <el-input v-model="customerForm.name"/></el-form-item>
                            <el-form-item label="工商注册号" prop="industrialAndCommercialRegistrationNo" :label-width="formLabelWidth">
                                <el-input v-model="customerForm.industrialAndCommercialRegistrationNo"/></el-form-item>
                            <el-form-item label="纳税人资质" prop="taxpayerQualification" :label-width="formLabelWidth">
                                <el-input v-model="customerForm.taxpayerQualification"/></el-form-item>
                            <el-form-item label="注册资金" prop="registeredCapital" :label-width="formLabelWidth">
                                <el-input v-model="customerForm.registeredCapital" maxlength="8" show-word-limit>
                                <template #append>单位(万)</template></el-input>
                                </el-form-item>
                            <el-form-item label="实缴资本" prop="paidInCapital" :label-width="formLabelWidth">
                                <el-input  v-model="customerForm.paidInCapital" maxlength="8" show-word-limit>
                                <template #append>单位(万)</template></el-input>
                                </el-form-item>                        
                        </el-card>
                    </el-tab-pane>
                    <el-tab-pane label="商户企业执照资质" name="forth" style="height:700px;overflow-y:auto;overflow-x:hidden">
                        <el-card class="box-card">
                            <template #header><div class="card-header"><span>商户企业执照资质</span>
                                <div style="float:right">
                                <el-button class="button" @click="func_next_handle_click(3)" type="text">上一步</el-button>
                                <el-button type="primary" @click="func_onSubmit">保存数据</el-button>
                                </div></div>
                            </template>
                            <el-form-item label="营业执照正/副本" prop="name" :label-width="formLabelWidth">
                                <el-upload class="upload-demo"
                                action="http://127.0.0.1:7003/file/upload/pic"
                                enctype="multipart/form-data"
                                accept="image/jpeg,image/git,image/png"
                                :before-upload="beforeUploadFile" :on-preview="handlePreview" :on-remove="handleRemove"
                                :on-exceed="handleExceed" :on-success="handleUploadSucceass" :on-error="handleError" :limit=limitNum :auto-upload=true
                                :file-list="fileList" list-type="picture">
                                <el-tooltip class="item" effect="dark" content="只能上传图片文件，且不超过10M" placement="top-start" >
                                    <el-button size="small" type="primary">上传图片</el-button>
                                </el-tooltip>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="其他类资质文件" prop="name" :label-width="formLabelWidth">
                                <el-upload class="upload-demo"
                                action="http://127.0.0.1:7003/file/upload/pic"
                                :on-preview="handlePreview" :on-remove="handleRemove"
                                :file-list="fileList" list-type="picture">
                                <el-tooltip class="item" effect="dark" content="只能上传图片文件，且不超过10M" placement="top-start" >
                                    <el-button size="small" type="primary">上传图片</el-button>
                                </el-tooltip>
                                </el-upload></el-form-item>
                        </el-card>
                    </el-tab-pane>
                </el-tabs>
                <el-form-item>
                    <el-button @click="func_onReset">重置表单</el-button>
                </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<style>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.form-box {
    width: 100%;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.box-card {
  width: 65%;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>

<script>
import { ref, reactive, toRefs, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";

export default {
    name: "customerForm",
    setup() {
        let tabPosition = ref("right")
        const activeTabName = ref("first");
        const formLabelWidth = ref("170px");
        const searchPostCodeLoading = ref(true);
        const searchTopicLoading = ref(true);
        const limitNum = ref(2);
        const files = reactive([]);
        // 类目下拉选单
        const groupPopForm = reactive({
            groupPopOptions1:'',
            groupPopOptions2:'',
            groupPopOptions3:'',
            groupPopOptions4:'',
        });
        const regPostCodePopForm = reactive({
            areaPops:'', cityPops:'', provPops:'',
            provOpts:'', cityOpts:'', areaOpts:'',
        });
        const busPostCodePopForm = reactive({
            areaPops:'', cityPops:'', provPops:'',
            provOpts:'', cityOpts:'', areaOpts:'',
        });
        const rules = {
            corporateName: [
                { required: true, message: "请输入公司名称", trigger: "blur" },
            ],
        };
        const customerFormRef = ref(null);
        const customerForm = reactive({
            // groupPopOptions:'',
            corporateName: "",
            nickName: "",
            mail: "",
            companyPhone: "",
            postalCode: "",
            establishmentDate: "",            
            businessTermDate: 0,
            region: "",
            typeEnterprise: "",
            natureEnterprise: "",
            enterpriseScaleType: "",
            industry: "",
            specialQualifications: "",
            qualificationsPic:"",
            businessAddressCode: "",
            businessAddress: "",
            registeredAddressCode: "",
            registeredAddress: "",
            businessScope: "",
            legalRepresentative: "",
            invoiceTaxpayer : "",
            organizationCode : "",
            organizationCodePic : "",
            industrialAndCommercialRegistrationNo : "",
            taxpayerQualification: "",
            registeredCapital: 0,
            paidInCapital: 0,
            file: [],
        });
        const func_tab_handleClick = (tab, event)=> {
            console.log(tab, event)
        };
        const func_next_handle_click = (obj) => {
            switch (obj) {
                case 1:
                    activeTabName.value = "first";
                    break;
                case 2:
                    activeTabName.value = "second";
                    break;
                case 3:
                    activeTabName.value = "third";
                    break;
                case 4:
                    activeTabName.value = "forth";
                    break;
                default:
                    break;
            }
        };
        const func_getOptionsLoad = (val) => {
            let query = {groupId: val};
            
        };
        const func_getPostCodeOptsLoad = (crfrom,type) => {
            let query = {};
            let city = '';
            
        };
        const func_setPostCode = (flg) => {
            if(flg ==1){
                customerForm.registeredAddressCode = [regPostCodePopForm.provPops , regPostCodePopForm.cityPops, regPostCodePopForm.areaPops].join(",");
            } else {
                customerForm.businessAddressCode = [busPostCodePopForm.provPops , busPostCodePopForm.cityPops, busPostCodePopForm.areaPops].join(",");
            }
        };
        // 提交
        const func_onSubmit = () => {
            // 表单校验
            customerFormRef.value.validate((valid) => {
                if (valid) {
                    console.log(form);
                    ElMessage.success("提交成功！");
                } else {
                    return false;
                }
            });
        };
        // 重置
        const func_onReset = () => {
            customerFormRef.value.resetFields();
        };
        const handleRemove = (file, fileList) => {
            console.log(file, fileList);
        };
        const handlePreview = (file) => {
            console.log(file);
        };
        // 文件上传成功时的钩子
        const handleUploadSucceass = (res, file, fileList) => {
            ElMessage.success("数据上传成功");
            pics.push(res.data.url);
            customerForm.qualificationsPic = res.data.url;
            customerForm.organizationCodePic = res.data.url;
        };
        // 文件上传失败时的钩子
        const handleError = (err, file, fileList) => {
            ElMessage.error();("数据上传失败");
        };
        // 文件超出个数限制时的钩子
        const handleExceed = (files, fileList) => {
            ElMessage.warning("只能选择 ${limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个图片");
        };
        // 文件状态改变时的钩子
        const handleChange = (files, fileList) => {
            customerForm.file = files.raw;
        };
        // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
        const beforeUploadFile = (file) => {
            let checkFileSize = files.length;
            if(checkFileSize > limitNum){
                ElMessage.warning("只能选择 ${limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个图片");
                return false;
            }
            let verifyFileTypeMap = ['png', 'jpg', 'jpeg', 'bmp'];
            let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
            let size = file.size / 1024 / 1024;
            if (verifyFileTypeMap.indexOf(extension) == -1) {
                ElMessage.warning("只能上传图片文件");
                return false;
            }
            if (size > 10) {
                ElMessage.warning("文件大小不得超过10M");
                return false;
            }
        };
        onMounted(() => {
            groupPopForm.groupPopOptions1 = '';
            groupPopForm.groupPopOptions2 = '';
            groupPopForm.groupPopOptions3 = '';
            groupPopForm.groupPopOptions4 = '';
            func_getPostCodeOptsLoad(1,1);
            // console.log("onMounted","init");
        });
        return {
            fileList: [],
            tabPosition, activeTabName, formLabelWidth, searchTopicLoading,
            groupPopForm, func_getOptionsLoad,
            customerForm, customerFormRef,
            func_tab_handleClick, func_next_handle_click,
            func_onSubmit, func_onReset,
            regPostCodePopForm, busPostCodePopForm, searchPostCodeLoading, func_getPostCodeOptsLoad, func_setPostCode,
            rules, 
            limitNum, files, handleRemove, handlePreview, handleUploadSucceass, handleError, handleExceed, handleChange, beforeUploadFile
        };
    },
};
</script>